<template>
  <div class="container">
    <div class="cycg wid_ove">
      <div style="height: 331.173px;">
        <div id="invoice-context" class="invoice-context" scale="0.16031121751025992" style="transform: scale(0.160311) translateX(438.6px);">
          <img class="invoice-img" src="../../assets/css/invoice/imgs/vat_invoice_template.png">
          <div class="title">
            <div class="region ">
              广东增值税电子普通发票
              <p class="hr"></p>
              发票联
            </div>
            <img class="executiveStamp" src="../../assets/css/invoice/imgs/zhang.png" />
          </div>
          <img class="qrCode" src="../../assets/css/invoice/imgs/erweima.png" />
          <c:if test="${wxInvoiceOpen.oil==1 }">
            <span class="oilCss">成品油</span>
          </c:if>
          <span class="isRed"></span>
          <div class="buyer">
            <span class="buyerName">${wxInvoiceOpen.purchaser }</span>
            <c:if test="${wxInvoiceOpen.purchaseType==1 }">
              <span class="buyerTaxNumber">${wxInvoiceOpen.purchaseTaxid }</span>

              <c:if test="${fn:length(wxInvoiceOpen.purchaseAddress )<25}">
                <span class="buyerAddress">${wxInvoiceOpen.purchaseAddress }${wxInvoiceOpen.purchaseTel }</span>
              </c:if>
              <c:if test="${fn:length(wxInvoiceOpen.purchaseAddress )>=25&&fn:length(wxInvoiceOpen.purchaseAddress )<32}">
                <span class="buyerAddress" style="font-size: 16px;">${wxInvoiceOpen.purchaseAddress }${wxInvoiceOpen.purchaseTel }</span>
              </c:if>
              <c:if test="${fn:length(wxInvoiceOpen.purchaseAddress )>=32}">
                <span class="buyerAddress" style="font-size: 12px;">${wxInvoiceOpen.purchaseAddress }${wxInvoiceOpen.purchaseTel }</span>
              </c:if>

              <c:if test="${fn:length(wxInvoiceOpen.purchaseOpeningBank)<15}">
                <span class="buyerAccount">${wxInvoiceOpen.purchaseOpeningBank }${wxInvoiceOpen.purchaseAccount }</span>
              </c:if>
              <c:if test="${fn:length(wxInvoiceOpen.purchaseOpeningBank)<21&&fn:length(wxInvoiceOpen.purchaseOpeningBank)>=15}">
                <span class="buyerAccount" style="font-size: 16px;">${wxInvoiceOpen.purchaseOpeningBank }${wxInvoiceOpen.purchaseAccount }</span>
              </c:if>
              <c:if test="${fn:length(wxInvoiceOpen.purchaseOpeningBank)>=21}">
                <span class="buyerAccount" style="font-size: 12px;">${wxInvoiceOpen.purchaseOpeningBank }${wxInvoiceOpen.purchaseAccount }</span>
              </c:if>
            </c:if>
          </div>
          <span class="machineNumberTitle">机器编号：</span>
          <span class="machineNumber">499111005205</span>
          <span class="invoiceCode">${wxInvoiceOpen.billingNo }</span>
          <span class="invoiceNumber">${wxInvoiceOpen.billingCode }</span>
          <span class="date_year">${year }</span>
          <span class="date_month">${month }</span>
          <span class="date_day">${day }</span>
          <span class="checksum">${wxInvoiceOpen.checkCode }</span>
          <span class="cipher">
            ${wxInvoiceOpen.passwordArea }
          </span>
          <div class="productList">
            <c:forEach items="${items}" var="item" varStatus="s">
              <div class="product">
                <span class="name">
                  <c:if test="${not empty item.taxName}"> *${item.taxName}*</c:if>${item.name }</span>
                <span class="model">${item.model }</span>
                <span class="unit">${item.unit }</span>
                <span class="quantity">${item.quantity }</span>
                <span class="unitPrice">${item.price }</span>
                <span class="priceAmount">${item.amount }</span>
                <span class="taxRate">${item.taxRate }</span>
                <span class="taxAmount">${item.taxAmount }</span>
              </div>
            </c:forEach>
          </div>
          <span class="totalPriceAmount">¥${wxInvoiceOpen.amount }</span>
          <span class="totalTaxAmount">¥${wxInvoiceOpen.taxAmount }</span>
          <span class="totalPriceAndTaxInCapital">${invoiceAmount }</span>
          <span class="totalPriceAndTax">¥${wxInvoiceOpen.invoiceAmount }</span>
          <div class="supplier">
            <span class="supplierName">${wxInvoiceOpen.shopinfo }</span>
            <span class="supplierTaxNumber">${wxInvoiceOpen.taxid }</span>
            <span class="supplierAddress">${wxInvoiceOpen.shopaddr }${wxInvoiceOpen.telno }</span>
            <span class="supplierAccount">${wxInvoiceOpen.bankname }${wxInvoiceOpen.bankaccounts }</span>
          </div>
          <span class="note">${wxInvoiceOpen.comment }</span>
          <span class="payee">${wxInvoiceOpen.payee }</span>
          <span class="reviewer">${wxInvoiceOpen.checker }</span>
          <span class="drawer">${wxInvoiceOpen.drawer }</span>
          <img class="signature" src="../../assets/css/invoice/imgs/91440514MA4UTH9G4P.png" />
        </div>
      </div>
      <div class="text-center xiazaifp">
        <c:if test="${wxInvoiceOpen.status==0}">
          <div>
            <div class="text-center btn-green">
              <a id="btn-receiveCard" href="#">插入卡包</a>
            </div>
          </div>
        </c:if>
        <div>
          <div class="text-center btn-green">
            <a href="${wxInvoiceOpen.invoicePdfUrl }">下载发票</a>
          </div>
        </div>
      </div>
      <c:if test="${wxInvoiceOpen.reversal==0}">
        <a id="btn-distroyed" href="#" style=" position: absolute; bottom: 16px; text-align: center; width: 100%;  font-size: 14px;">注：如需作废发票
          <span style="border-bottom: 1px solid #f00;">请点击此链接</span>
        </a>
      </c:if>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style scoped>
@import "../../assets/css/invoice/sqkp";
@import "../../assets/css/invoice/previewChromeStyle";
</style>
